<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<meta name="viewport"
		content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<title>私教列表</title>
	<script src="../member/js/flexible.js"></script>
	<link rel="stylesheet" href="../member/css/flexible.css">
	<link rel="stylesheet" href="../member/css/reset.css">
	<link rel="stylesheet" href="../member/css/style.css">
	<link rel="stylesheet" href="../member/css/mobiscroll.custom-3.0.0-beta6.min.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css">
	<style>
		body {
			background-color: #F7F7F7;
			margin: 0px;
			padding: 0px;
		}
	</style>

	<script src="js/vue/vue.js"></script>
	<script src="js/vue/axios.js"></script>
	<script src="js/vue/qs.js"></script>
	<script src="js/vue/MD5.js"></script>
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
	<script src="js/mobiscroll.custom-3.0.0-beta6.min.js"></script>

</head>

<body>
	<div id="app">
		<div class="h10"></div>

		<div class="curriculum_head">

			<div ref="rl" class="rl" v-on:click="show = true">
				<img src="images/rl.png">
			</div>
			<div>
				<van-calendar v-model="show" @confirm="onConfirm" :show-confirm="false" />
			</div>
			<template>

				<div class="rq">

					<ul>

						<li v-for="item in dateList" :key="item.time" @click="getweakInfo(item.time)">

							<span v-bind:class="{rq_check:item.check=='1'}" class="s">{{item.week}}</span><br>

							<span v-bind:class="{rq_check:item.check=='1'}" class=" x">{{item.date}}</span>

						</li>

					</ul>

				</div>

			</template>

			<div class="clear"></div>

		</div>


		<div class="h10"></div>

		<div v-if="(kcData.length > 0)">

			<template>
				<div class="newcurriculum_jl" v-for="(item,index) in kcData">
					<!-- 教练 -->
					<div v-on:click="clickisOpen(item)"
						style="display: flex;flex-direction:row;align-items:center;justify-content:space-between; height: 0.7rem; width: auto;">

						<div style="display: flex;flex-direction:row;align-items:center;">
							<div style="margin-left: 0.15rem;" flex="dir:left">
								<van-image round fit="cover" width="0.38rem" height="0.38rem" :src="item.Picurl"
									error-icon="./images/user.png" />
							</div>
							<div style="font-size: 0.14rem; color: #333333; margin-left: 0.15rem;">
								<span>{{item.Sname}}</span>
							</div>
						</div>
						<div style=" display: flex;flex-direction:row;align-items:center;">
							<div v-if="item.class.length > 0"
								style="font-size: 0.12rem; color: #666666;margin-right: 0.15rem;">
								{{item.open?"收起":"查看"}}
								<img v-if="item.open" style="width: 10px;height: 7px;" src="./images/uparraw.png">
								<img v-else style="width: 10px;height: 7px;" src="./images/downImg.png">
							</div>
							<div v-else="item.class.length > 0"
								style="font-size: 0.14rem; color: #747474;margin-right: 0.15rem;">
								今日未排课
							</div>
						</div>
					</div>
					<!-- 课程 -->
					<div v-if="item.open" v-for="(item1,index1) in item.class">
						<div
							style="display: flex;flex-direction:row;align-items:center;justify-content:space-between;height: 0.55rem;">

							<div style="display: flex;flex-direction:row;align-items:center;">
								<div
									style="background-color: #1778FF; height: 8px; width: 8px; border-radius:4px; margin-left: 0.15rem;">
								</div>
								<div style="font-size: 0.15rem; color: #333333;margin-left: 0.04rem;">
									<b>{{item1.Title}}</b>
								</div>
							</div>

							<div v-on:click="clickYuyue(item,index1)"
								style="margin-right: 0.15rem;font-size: 0.11rem; color: #FFFFFF;width: 0.5rem;height: 0.22rem;border-radius:0.11rem;background-color: #1778FF;text-align: center;line-height: 0.22rem;">
								预约
							</div>

						</div>
					</div>

				</div>
				<div class="h10"></div>
			</template>
		</div>
		<!-- 无数据 -->
		<div class="notDate" v-else style="margin-top: .3rem;text-align: center;">

			<img src="images/notDate.png" />

		</div>

		<div style="height: 0.45rem;"></div>

	</div>

</body>

<script>
	Date.prototype.format = function (fmt) {
		var o = {
			"M+": this.getMonth() + 1, //月份
			"d+": this.getDate(), //日
			"h+": this.getHours(), //小时
			"m+": this.getMinutes(), //分
			"s+": this.getSeconds(), //秒
			"q+": Math.floor((this.getMonth() + 3) / 3), //季度
			"S": this.getMilliseconds() //毫秒
		};
		if (/(y+)/.test(fmt)) {
			fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		}
		for (var k in o) {
			if (new RegExp("(" + k + ")").test(fmt)) {
				fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
			}
		}
		return fmt;
	}


	var vm = new Vue({

		el: '#app',

		data: {
			show: false,
			date: '',

			dateList: [],

			kcData: [],

			from: {},

			currIndex: '0',

			vids: '',
			uid: ''
		},

		created() {

			let time = ''

			let Request = new Object()
			Request = GetRequest()

			let uid = Request['uid'];
			if (uid) {
				this.uid = uid;
			}
			var curr = new Date().format("yyyy-MM-dd");
			this.getweakInfo(curr);

		},

		methods: {
			//获取本周信息
			getweakInfo(time) {

				if (this.date == time) {
					return;
				}
				var curr = new Date(time);

				var now = new Date(new Date().toLocaleDateString()).getTime();
				var currs = curr.getTime();

				if (currs < now) {
					this.$toast("所选时间不小于今天")
					return
				}


				this.getlists(time)

				this.date = time;
				;
				var first = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
				var arr = ["日", "一", "二", "三", "四", "五", "六"];
				var list = [];
				for (let index = 0; index < arr.length; index++) {
					const week = arr[index];

					var last = first + index;

					var lastday = new Date(time);
					lastday.setDate(last);

					var date = lastday.format("MM/dd");
					var time1 = lastday.format("yyyy-MM-dd");
					var check = 0;
					if (time == time1) {
						check = 1;
					}
					var dic = { "week": week, "date": date, "time": time1, "check": check };
					list.push(dic);

				}
				this.dateList = list;

			},

			getlists(time) {

				const params = {
					uid: this.uid,
					date: time
				}


				window.vant.Toast.loading({
					mask: true,
					message: '加载中...'
				});


				getVs()
				var that = this;
				axios.post('/mobileapi/boss/curr.php?act=sjListNewS', Qs.stringify(params)).then(function (response) {
					window.vant.Toast.clear();
					let { data, code } = response.data
					if (code !== 200) {
						window.vant.Toast.fail(msg)
					} else {
						var array = data;
						for (let index = 0; index < array.length; index++) {
							const element = array[index];
							element.open = false;
						}
						array.sort(function (a, b) {
							let as = a.class.length > 0 ? 1 : 0;
							let bs = b.class.length > 0 ? 1 : 0;
							return bs - as;
						})
						that.kcData = array;
					}

				}).catch(function (error) {
					window.vant.Toast.clear();
					console.log(error);

				});
			},

			clickisOpen(item) {
				if (item.class.length > 0) {
					item.open = !item.open;
				} else {
					this.$toast("教练:" + item.Sname + " \n今日未排课");

				}
			},
			zkSq(index) {

				console.log(index)

				this.currIndex = index + 1

			},

			zkSqS(index) {

				console.log(index)

				this.currIndex = index

			},

			orderSk(Date, Key, PONEid, Pid) {

				window.location.href = 'curriculum_p_yvyue.html?date=' + Date + '&key=' + Key + '&poneid=' + PONEid + '&pid=' + Pid + ''

			},
			clickYuyue(item, index1) {

				var dateJson;
				this.dateList.forEach(element => {
					if (element.check == 1) {
						dateJson = JSON.stringify(element);
					}
				});

				sessionStorage.setItem('ykdate', dateJson);
				sessionStorage.setItem('jlitem', JSON.stringify(item));
				window.location.href = './PrivateLessons/privateLessons.html?index=' + index1 + '&uid=' + this.uid;
			},
			onConfirm(date) {
				this.show = false;
				var curr = date.format("yyyy-MM-dd");
				this.getweakInfo(curr);
			},

		}

	})

</script>

</html>